<template>
	<view>
		<!-- 背景图片尺寸 -->
		<view class="top">
			<view>
				<view class="my-info-box">
					<view>
						<view class="ownerName" @click="userInfoFun()">{{ baseFormData.ownerName || "微信用户" }}</view>
						<!-- vip显示 -->
						<view class="my-vip-num" @click="userInfoFun" v-if="!baseFormData.ownerName">
							修改个人资料
						</view>
						<view class="my-vip-num">
							{{ isAdmin == 2?'店长':'' }}
						</view>
					</view>
					<view class="my-logo-box" >
						<view @click="userInfoFun()">
							<image class="user-logo" :src="baseFormData.avatarUrl ||  userLogo"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="myPage-listTable">
			<view v-if="isLogin" class="my-car_add flex-jsb-alc" @click="goPageVehicle('/pages/user/user')">
				<label class="car-add_label">我的资料</label>
				<view class="car-add_text flex-alc">
					<image src="../../static/my/icon-path.svg" mode="widthFix" class="car-add_img"></image>
				</view>
			</view>
			<view v-if="isLogin" class="my-car_add flex-jsb-alc" @click="goPageVehicle('/pages/vehicle/vehicle')">
				<label class="car-add_label">我的爱车</label>
				<view class="car-add_text flex-alc">
					<image src="../../static/my/icon-path.svg" mode="widthFix" class="car-add_img"></image>
				</view>
			</view>
			<view v-if="isLogin && isAdmin == 2" class="my-car_add flex-jsb-alc" @click="goOrder('/pages/reserve/confirm')">
				<label class="car-add_label"> 取送车 </label>
				<view class="car-add_text flex-alc">
					<image src="../../static/my/icon-path.svg" mode="widthFix" class="car-add_img"></image>
				</view>
			</view>
			<view v-if="isLogin" class="my-car_add flex-jsb-alc" @click="goVip()">
				<label class="car-add_label">我的会员卡</label>
				<view class="car-add_text flex-alc">
					<image src="../../static/my/icon-path.svg" mode="widthFix" class="car-add_img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {subscribe} from '@/utils/config.js'
	export default {
		data() {
			return {
				canIUse: uni.canIUse('button.open-type.getUserInfo') || false,
				paddingTop: uni.getStorageSync('nowTabHeight'), // 获取头部padding
				userInfo: uni.getStorageSync('userInfo'), //获取用户信息
				userLogo: '../../static/my/userLogo.png',
				vipImg: '../../static/my/vipN.png',
				isVipType: false,  //是否是vip
				myCollectionImg: "../../static/my/myCollection.png",  //收藏图片
				myFeedbackImg:  '../../static/my/myFeedback.png',
				serviceImg: '../../static/my/service.png',
				isLogin:false,
				baseFormData:{
					avatarUrl:''
				},
				isAdmin:1,
				openid:uni.getStorageSync('openid'),
				subscriptionsSetting:false,
				app:"weixin",
				source:"weixin"
			}
		},
		onLoad(){
			if(uni.getSystemInfoSync().app){
				this.app = uni.getSystemInfoSync().app
			}
			// #ifdef MP-WEIXIN
			   this.source = "weixin"
			// #endif
			
			// #ifdef H5
			   this.source = "H5"
			// #endif
			
			// #ifdef MP-ALIPAY
			   this.source = "alipay"
			// #endif
			if(uni.getStorageSync('openid')){
				this.isLogin  = true;
				this.init();
			}
			// wx.getSetting({
			//   withSubscriptions: true,
			//   success: (res)=> {
			//     console.log(res.authSetting)
			//     // res.authSetting = {
			//     //   "scope.userInfo": true,
			//     //   "scope.userLocation": true
			//     // }
			//     console.log(res.subscriptionsSetting)
			// 	if(res.subscriptionsSetting.mainSwitch){
			// 		this.subscriptionsSetting = res.subscriptionsSetting.mainSwitch;
			// 	}
			//   }
			// })
		},
		onShow() {
			this.isLogin  = true;
			this.init();
		},
		methods: {
			init(){
				uni.request({
					url: "owner/getUserInfo",
					method:"POST",
					data:{
						source:this.source,
						openid:this.openid
					},
					success:(res)=> {
						this.baseFormData = {
							...res.data.data,
						}
						this.isAdmin = res.data.data.admin;
						uni.setStorageSync('isAdmin',this.isAdmin);
						if(res.data.data.ownerMobile && res.data.data.ownerName){
							uni.setStorageSync('ownerName',res.data.data.ownerName);
							uni.setStorageSync('ownerMobile',res.data.data.ownerMobile);
						}else{
							uni.navigateTo({
								url: "/pages/user/register",
							})
						}
					}
				})
			},
			goOrder(){
				uni.navigateTo({
					url:"/pages/reserve/confirm"
				})
			},
			userInfoFun(){
				uni.navigateTo({
					url: "/pages/user/user"
				})
			},
			goVip(){
				uni.navigateTo({
					url: "/pages/member/index?id=" + this.baseFormData.mid
				})
			},
			goPageVehicle(page){
				uni.navigateTo({
					url: page
				})
			},
			goPage(){
				wx.getSetting({
				  success(res) {
					  console.log(res)
				    if (!res.authSetting['scope.userInfo']) {
				      wx.authorize({
				        scope: 'scope.userInfo',
				        success () {
				          // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
				          
				        }
				      })
				    }else{
						wx.getUserInfo({
						  success: function(res) {
							  console.log(res)
						    var userInfo = res.userInfo
						    var nickName = userInfo.nickName
						    var avatarUrl = userInfo.avatarUrl
						    var gender = userInfo.gender //性别 0：未知、1：男、2：女
						    var province = userInfo.province
						    var city = userInfo.city
						    var country = userInfo.country
						  }
						})
					}
				  }
				})
			},
			getuserinfo(res){
				console.log(res)
			},
			getPhoneNumber(res){
				console.log(res)
			}
		},
		
	}
</script>

<style lang="less" scoped>
	.top{
		padding: 180rpx 0 40rpx 0;
		background-image:linear-gradient(90deg, #F1EEF5, #EBF1F6);
		.userNickName{
			font-size: 40rpx;
		}
		.getPhoneNumber{
			background: #87CEFA;
			height: 40rpx;
			font-size: 30rpx;
			margin: 0;
			padding: 0;
			width: 180rpx;
			height: 80rpx;
		}
		.user-logo {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			overflow: hidden;
		}
	}
	.my-vip-box {
		width: 670rpx;
		margin: 0 auto;
		height: 100rpx;
		margin-top: 60rpx;
	
		image {
			width: 100%;
		}
	}
	
	
	// my-info-box 样式开始
	.my-info-box {
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
       .ownerName{
		   font-size: 50rpx;
	   }
		.my-logo-box {
			>view {
				position: relative;
				width: 180rpx;
				height: 180rpx;

				

				.user-vip {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
				}
			}

		}

		.my-nickName {
			color: #333;
			font-size: 56rpx;
			max-width: 400rpx;
			font-weight: bold;
			margin-bottom: 6rpx;
		}


		.my-vip-num {
			color: #999;
			font-size: 28rpx;
			padding-top: 20rpx;
		}

		// 黄金卡：金色
		.my-vip-num1 {
			color: #87CEFA;
			font-size: 28rpx;
		}

		// 钻石卡：亮天蓝色
		.my-vip-num2 {
			color: #a63c2c;
			font-size: 28rpx;
		}

		// 黑金卡：暗淡的灰色
		.my-vip-num3 {
			color: #696969;
			font-size: 28rpx;
		}

		//黑钻卡：纯黑
		.my-vip-num4 {
			color: #000000;
			font-size: 28rpx;
		}

		.my-amount-box {
			margin-top: 50rpx;
			overflow: hidden;

			>view {
				float: left;
				margin-right: 80rpx;

				>view:first-child {
					color: #333;
					font-size: 45rpx;
					margin-bottom: 14rpx;
				}

				>view:last-child {
					background-image: linear-gradient(to right, #A289C1, #745994);
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					font-size: 32rpx;
					color: #fff;
					border-radius: 50rpx;
				}
			}
		}


	}

	// my-info-box 样式结束
	
	.myPage-listTable {
		padding: 0rpx 0 80rpx 0;
		background-color: #FAFAFA;
	
		.myPage-listTable-box {
			display: flex;
			text-align: center;
			flex-wrap: wrap;
	
			>view {
				width: 25%;
				margin-bottom: 30rpx;
	
				>view {
					font-size: 24rpx;
	
					image {
						margin-bottom: 20rpx;
						width: 64rpx;
						height: 64rpx;
					}
	
				}
	
				.s {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
	
				.myPage-listTable-txtA {
					color: #333;
				}
	
				.myPage-listTable-txtB {
					color: #666;
				}
			}
		}
	
		.myPage-listTable-title {
			font-weight: bold;
			color: #333;
			font-size: 28rpx;
			margin-bottom: 40rpx;
			padding: 20rpx 0 0 20rpx;
		}
	}
	
	
	// 车辆列表
	.my-car_add,
	.my-car_model {
		margin: 30rpx 0;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		
	}
	
	.my-car_add {
		padding: 20rpx;
		padding-left: 40rpx;
	}
	.car-add_label {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		line-height: 40rpx;
	}
	.car-add_text,
	.info-text {
		color: #666666;
	}
	
	.car-add_text:active {
		color: #333;
	}
	
	.car-add_img {
		display: block;
		width: 16rpx;
		height: 16rpx;
		margin-left: 8rpx;
	}
	
	.my-car_model {
		padding: 16rpx 20rpx;
	}
	
	.info-title {
		margin-bottom: 6rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		font-weight: bold;
	}
	
	.info-title_subtitle,
	.car-add_text,
	.info-text {
		font-size: 24rpx;
		line-height: 34rpx;
	}
	
	.info-img {
		display: block;
		width: 200rpx;
		height: 112rpx;
	}
	
	.my-more_box {
		margin: 0 40rpx;
		margin-top: 140rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
	}
</style>